*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
html,body{
    font-size: 27.7vw;
    height: 100%;
}
section{
    height: 100%;
    display:flex;
    flex-direction:column;
}
header{
    height: 2.11rem;
    background: url(./images/banner_slices/banner@2x.png) no-repeat center;
    background-size: cover;
    display: flex;
    top: 0.4rem;
    justify-content: center;
    padding-top: 0.4rem;
}
main{
    flex: 1;
    overflow: auto;
    width: 3.28rem;
    margin: 0 auto;
}
nav{
    height: 0.5rem;
    background-color: #eee;
    
}
.header-search{
    width: 3.28rem;
    height: 0.38rem;
    display: flex;
    align-items:center;
    justify-content: space-between;
    font-size: 0.12rem;
}
.header-search div:nth-child(1){
    width: 0.28rem;
    line-height: 0.17rem;
    color: #FFFFFF;
    font-size:0.14rem;
}
.header-search div:nth-child(2){
    width: 2.44rem;
    height: 0.38rem;
    background-color: white;
    border-radius: 0.52rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-search div:nth-child(2) img:nth-child(1){
    width: 0.18rem;
    height: 0.18rem;
    margin-left: 0.1rem;
}
.header-search div:nth-child(2) div:nth-child(2){
    color:#999999;
    /* margin-left: 0.1rem; */
    width: 1.48rem;
}
.header-search div:nth-child(2) div:nth-child(3){
    width: 0.01rem;
    height: 0.18rem;
    background-color: #D7D7D7;
}
.header-search div:nth-child(2) img:nth-child(4){
    width: 0.18rem;
    height: 0.18rem;
    margin-right: 0.1rem;
}
.header-search img:nth-child(3){
    width: 0.24rem;
    height: 0.24rem;
}
.menu{
    height: 5rem;
    /* background-color: aqua; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-top: 0.24rem;
    font-size: 0.14rem;
}
.menu > ul:nth-child(1){
    width: 3.28rem;
    height: 1.7rem;
    /* background-color: rebeccapurple; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.menu > ul:nth-child(1) li{
    height: 0.85rem;
    width: 0.57rem;
    font-size: 0.14rem;
}
.menu > ul:nth-child(1) li img{
    height: 0.56rem;
    width: 0.57rem;
}
.menu > ul:nth-child(1) li > span{
    display: inline-block;
    color: #000000;
    text-align: center;
    width: 0.57rem;
    height: 0.29rem;
    font-size: 0.12rem;
}
.menu > div:nth-child(2){
    width: 3.28rem;
    height: 0.79rem;
    /* background-color: blue; */
    margin-top: 0.11rem;
}
.middle{
    display: flex;
    justify-content: space-between;
    height: 0.79rem;
    width: 3.28rem;
}
.middle > div{
    width: 1.48rem;
    height: 0.79rem;
}
.middle >div > img{
    width: 1.48rem;
    height: 0.57rem;
}
.middle > div >div{
    width: 1.48rem;
    line-height: 0.22rem;
    margin-left: 0.02rem;
}
.middle > div >div span:nth-child(1){
    font-size: 0.12rem;
    color: #000000;
    margin-right: 0.05rem;
}
.middle > div >div span:nth-child(2){
    font-size: 0.1rem;
    color: #999999;
}
.menu div:nth-child(3){
    width: 3.28rem;
    height: 0.6rem;
    display: flex;
    justify-content:space-between;
    margin-top: 0.18rem;
}
.menu div:nth-child(3) img{
    width: 0.78rem;
    height: 0.6rem;
}
.menu div:nth-child(4){
    width: 3.28rem;
    height: 0.6rem;
    margin-top: 0.1rem;
    /* background-color: brown; */
}
.menu div:nth-child(4) img{
    width: 3.28rem;
    height: 0.6rem;
}
.menu div:nth-child(5){
    margin-top: 0.33rem;
    line-height: 0.44rem;
}
.menu div:nth-child(5) span:nth-child(1){
    font-size: 0.16rem;
}
.menu div:nth-child(5) span:nth-child(2){
    font-size: 0.16rem;
    color: #36D1A1;
}
.menu div:nth-child(5) span:nth-child(3){
    font-family: 0.1rem;
    color: #666666;
    float: right;
}

.houses{
    width: 3.28rem;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    background-color: #F7F7F7;
    font-size: 0.16rem;
    /* 注释font-size之后会出问题 */
}
.houses li{
    width: 1.6rem;
    height: 2.11rem;
    position: relative;
    border-radius: 0.08rem;
    background-color: #FFFFFF;
    margin-bottom: 0.1rem;
}
.houses li img{
    width: 1.6rem;
    height: 1.2rem;
}
.houses li >div:nth-of-type(1){
    line-height: 0.16rem;
    position: absolute;
    top:0.98rem;
    margin-left: 0.1rem;
}
.houses li > div:nth-of-type(1)> img{
    width: 0.16rem;
    height: 0.16rem;
}
.houses li > div:nth-of-type(1) > span{
    vertical-align: top;
    font-size: 0.1rem;
    color: #FFFFFF;
}
.houses li > div:nth-of-type(2){
    height: 0.22rem;
    margin-left: 0.1rem;
}
.houses li > div:nth-of-type(2) span:nth-child(2){
    font-size: 0.1rem; 
    float: right; 
    line-height: 0.16rem;
    color: #999999;
}
.houses li > div:nth-of-type(3){
    font-size: 0.12rem;
    margin-top:0.02rem;
    margin-left: 0.1rem;
    color: #000;
}
.houses li > div:nth-of-type(4){
    height: 0.16rem;
    border-radius: 0.02rem;
    display: flex;
    margin-top: 0.1rem;
    margin-left: 0.1rem;
}
.houses li >div:nth-of-type(4) div{
    background-color: #36D1A1;
    width: 0.42rem;
    color: #FFFFFF;
    font-size: 0.1rem;
    text-align: center;
}
nav section{
    width: 3.14rem;
    height: 0.5rem;
    margin:0 auto;
    display: flex;
    justify-content:space-between;
    font-size: 0.14rem;
    flex-direction: row;
}
nav section div{
    width: 0.28rem;
    height: 0.43rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    justify-content:center;
    padding-top: 0.04rem;
}
nav section div img{
    width: 0.28rem;
    height: 0.28rem;
}
nav section div span{
    font-size: 0.1rem;
    text-align: center;
}